<template>
	<view>
		<view>
		<ren-calendar ref='ren' :collapsible='false' :markDays='markDays' :headerBar='true' @onDayClick='onDayClick' @current-month-day='onNext'></ren-calendar>
		</view>
		
		<view class="courseList">
			<view class="item" v-for='itm in classInfoList' :class="itm.isLine==1?'disabled':''">
				<view style="display: flex;justify-content: space-between;align-items: center;"> 
                <view class="">
                	<image src="https://xb-street.oss-cn-shanghai.aliyuncs.com/yl-school/static/clock.png" class="icon"></image>
                	<text class="commonTitle">{{itm.startTime}}-{{itm.endTime}}</text> <text class="status" :class="itm.status==0?'active':''">{{itm.isLine==0?'待上课':'已结束'}}</text>
                </view>
				<view v-if="itm.isLine==0" style="padding: 15px;color: #333333;font-size: 25rpx;">{{itm.shopName}}</view>
				<view v-if="itm.isLine==1" style="padding: 15px;color: #999999;font-size: 25rpx;">{{itm.shopName}}</view>
				</view>
			    <view>
					<view class="commonTitle">{{itm.title}}</view>
					<view class="colorGray">上课地点：{{itm.address}}</view>
				</view>
			</view>
	    </view>
	</view>
</template>

<script>
	import RenCalendar from '@/components/ren-calendar/ren-calendar.vue'
	export default {
		components:{
			RenCalendar
		},
		data() {
			return {
				courseTitle:'夕阳红老年学堂',
				courseList:[   //status:-1已结束   0待上课
					{time:'09:00 - 10:30', status:'-1',title:'评弹班(线下基础班)', address:'桂花公益坊'},
					{time:'13:00 - 15:30', status:'0',title:'评弹班(线下基础班)', address:'桂花公益坊'},
				],
				markDays:'',
				newDate:'',
				MonthDate:'',
				choose:'',
				classInfoList:'',
			}
		},
		onLoad() {
			this.initDate()
			this.getScheduleByDate(this.newDate)
			// this.getScheduleByMonth(this.newDate)
		},
		onShow() {
			this.initDate()
			this.getScheduleByMonth(this.MonthDate)
		},
		methods: {
			initDate() {
				//当前时间
				this.newDate = new Date().format("yyyy-MM-dd");
				this.MonthDate = new Date().format("yyyy-MM-dd");
			},
			onDayClick(data){
				this.curDate = data.date;
				// this.isShowSchedule = false //用于动画
				
				// const {
				// 	checked,
				// 	year,
				// 	month,
				// 	day
				// } = payload
				// if(date==undefined){
				// 	date = `${year}-${month}-${day}`
				// }
				// console.log('时间：'+date)
				// this.choose = date
				this.getScheduleByDate(data.date);
			},
			//获取日历信息(红点)
			getScheduleByMonth(MonthDate) {
				this.$api.getScheduleDate({
					date: MonthDate
				}).then((res) => {
					this.markDays = res.data.dataMap
					console.log(res.data.dataMap)
			
				})
			},
			//获取日程
			getScheduleByDate(date) {
				this.$api.getTeacherScheduleByDate({
					date: date
				}).then((res) => {
					this.classInfoList = res.data.dataMap
					this.isShowSchedule = true
					if (this.classInfoList.isSign == -1) {
						this.signFlag = false
					} else {
						this.signFlag = true
					}
					console.log(JSON.stringify(res))
			
				})
			},
			// onPrev(payload) {
			// 	let date = payload.year + '-' + payload.month + '-' + '01'
			// 	let date2 = payload.year + '-' + payload.month + '-' + '1'
			// 	this.choose=date2
			// 	console.log(date)
			// 	this.getScheduleByMonth(date)
			// 	this.getScheduleByDate(date)
			// },
			onNext(payload) {
				let date = payload + '-01'
				let date2 = payload + '-1'
				this.choose=date2
				// this.onSignIn(payload,date)
				this.getScheduleByMonth(date)
				this.getScheduleByDate(date)
			}
		}
	}
</script>

<style lang="scss">
  page{background-color: #F8F8F8;}
  .disabled{
	 .commonTitle{color:#999999}
	 color:#999999;
	 .colorGray{color:#999999!important}
  }
  .courseList{
	  .item{
		  background-color: white;
		  padding: 20px;
		  border-radius: 10px;
		  margin:10px;
		  line-height: 50rpx;
		  .active{
			  border-color: #FF9933!important;
			  color:#FF9933!important;
		  }
		  .status{
			  border:1px solid #999999;
			  border-radius: 3px;
			  color:#999999;
			  padding: 1px 5px;
			  margin-left:10px;
		  }
	  }
  }
</style>
